<template>
  <view class="container screen-width">
    <view class="search-content">
      <view class="search_item">
        <input type="text" placeholder="请输入您想要查询的关键词" v-model="form.keyword" />
        <image src="../../static/proty/search_icon.png" mode @tap="searchConter" />
      </view>
    </view>
    <!-- 搜索条件 -->
    <view class="search-condition">
      <view @tap="showTimePop">
        <input type="text" :value="timeText ? timeText : '发布时间'" disabled />
        <image src="../../static/proty/botton_icon.png" mode />
      </view>
    </view>
    <!-- 列表 -->
    <scroll-view scroll-y class="content_main" @scrolltolower="scrolltolower">
      <ul>
        <!-- 政策通知 -->
        <view
          v-for="(item, index) in getNotifyList"
          :key="index"
          class="listItem"
          @click="toPolicyDetail(item.id)"
        >
          <view class="title" v-html="item.title" />
          <view class="center">
            <view class="area multipleRow">{{ departmentName }}</view>
            <view class="time multipleRow">{{ item.releaseTime }}</view>
          </view>
        </view>
      </ul>
      <!-- 没有数据的提示 -->
      <van-divider
        v-show="getNotifyList.length && total < total + 1"
        content-position="center"
      >我也是有底线的</van-divider>
      <van-divider v-if="!getNotifyList.length" content-position="center">暂无数据</van-divider>
    </scroll-view>

    <!-- 发布时间 -->
    <van-popup v-model="showTime" position="bottom" :style="{ height: '50%' }">
      <van-picker
        title="发布时间"
        show-toolbar
        :columns="columns1"
        @confirm="onConfirmTimes"
        @cancel="cancel"
      />
    </van-popup>
    <Festival></Festival>
  </view>
</template>
<script>
import { getDepartmentPolicyNotice } from "../../util/api/policy.js";
export default {
  data() {
    return {
      getNotifyList: [],
      total: 0,
      form: {
        pageNo: 1,
        departmentId: "",
        timeScreening: "",
        keyword: ""
      },
      throttle: false,
      showTime: false,
      timeText: "",
      departmentName: "",
      columns1: [
        { text: "请选择", value: "" },
        { text: "一年内", value: "12" },
        { text: "半年内", value: "6" },
        { text: "30天内", value: "30" },
        { text: "7天内", value: "7" }
      ]
    };
  },
  onLoad(e) {
    this.form.departmentId = e.id;
    this.getList();
  },
  methods: {
    showTimePop() {
      this.showTime = true;
    },
    getList() {
      this.throttle = true;
      uni.showLoading({
        title: "加载中...",
        mask: false
      });
      getDepartmentPolicyNotice(this.form)
        .then(res => {
          if (res.code === 200) {
            this.$changeText(
              res.result.departmentPolicyNotice.records,
              "title",
              this.form.keyword
            );
            if (this.form.pageNo === 1) {
              this.getNotifyList =
                res.result.departmentPolicyNotice.records || [];
            } else {
              this.getNotifyList = this.getNotifyList.concat(
                res.result.departmentPolicyNotice.records
              );
            }
            this.departmentName = res.result.departmentName;
            this.total = res.result.departmentPolicyNotice.total;
          }
        })
        .finally(() => {
          uni.hideLoading();
          this.throttle = false;
        });
    },
    scrolltolower() {
      if (!this.throttle) {
        if (this.getNotifyList.length >= this.total) {
          return;
        }
        this.form.pageNo = this.form.pageNo + 1;
        this.getList();
      }
    },
    searchConter() {
      if (this.keyword === "") {
        uni.showToast({
          title: "请输入你要查询的关键字",
          duration: 2000,
          icon: "none"
        });
        return;
      }
      this.form.pageNo = 1;
      this.getNotifyList = [];
      this.getList();
    },
    // 点击按钮(发布时间)
    onConfirmTimes(val) {
      if (!val.value) {
        this.timeText = val.value;
      } else {
        this.timeText = val.text;
      }
      this.form.timeScreening = val.value;
      this.showTime = false;
      this.form.pageNo = 1;
      this.getNotifyList = [];
      this.getList();
    },
    toPolicyDetail(id) {
      uni.navigateTo({
        url: `/pages/policy/policyDetails?id=${id}&inform=通知`
      });
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  height: calc(~"100vh - 88upx");
  .search-content {
    width: 100%;
    padding: 20upx 30upx;
    box-sizing: border-box;
    background: #2862ad;
    .search_item {
      height: 40px;
      width: 100%;
      display: flex;
      background-color: #fff;
      align-items: center;
      border-radius: 14rpx;
    }

    input {
      flex: 1;
      font-size: 14px;
      padding: 0 10rpx;
      padding-left: 30rpx;
      height: 30rpx;
      &::placeholder {
        font-size: 12px;
      }
    }

    image {
      max-width: 16px;
      max-height: 16px;
      margin: 0 30rpx;
    }
  }
  .search-condition {
    padding: 0 20upx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 60px;
    background: #f8f9fd;
    view {
      max-height: 80upx;
      background-color: #fff;
      margin-right: 50upx;
      display: flex;
      padding: 10upx 10upx;
      align-items: center;
      width: 30%;

      image {
        width: 20upx;
        height: 14upx;
        margin-left: 20upx;
      }

      input {
        width: 140upx;
        font-size: 10px;
        color: #44a2ff;
      }
    }
  }
  .content_main {
    // height: 750upx;
    background: #f8f9fd;
    height: calc(~"100vh - 328upx");
    ul {
      .listItem {
        border-radius: 10upx;
        background-color: #fff;
        margin: 20upx 30upx;
        padding: 30upx 40upx;

        .title {
          color: #000;
          font-weight: 700;
          font-size: 16px;
        }

        .center {
          display: flex;
          margin-top: 20upx;
          justify-content: space-between;

          .area {
            flex: 1;
            padding-right: 20upx;
            color: #aaa;
            font-size: 10px;
          }

          .time {
            text-align: right;
            flex: 1;
            color: #aaa;
            font-size: 10px;
          }
        }
      }

      li {
        border-radius: 10upx;
        background-color: #fff;
        margin: 20upx 30upx;
        padding: 30upx 40upx;

        .title {
          color: #000;
          font-weight: 700;
        }

        .center {
          display: flex;
          margin-top: 20upx;
          justify-content: space-between;

          .area {
            flex: 1;
            padding-right: 20upx;
            color: #aaa;
            font-size: 10px;
          }

          .time {
            flex: 1;
            color: #aaa;
            font-size: 10px;
          }
        }
      }
    }
  }
}
.picker-btn {
  padding: 20upx;
  .left {
    color: #aaaaaa;
  }
  .right {
    color: #4e98ff;
  }
}
picker-view {
  width: 100%;
  height: 180px;
  margin-top: 20upx;
  text-align: center;
}
</style>